import React from 'react';
import { Modal, InputNumber } from 'antd';
import { connect } from 'umi';
import { configModal } from '@/assets';
import { NumberSub } from '@/utils';
import styles from './index.less';

function BenefitSettingModal({ hourOrderList, dispatch }, ref) {
  React.useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = React.useState(false),
    [benefit, setBenefit] = React.useState(100);

  const initHandle = () => {
    setShowModal(true);
  };

  const confirm = () => {
    // 设置24个时点的收益变动
    let hourOrderListNew = JSON.parse(JSON.stringify(hourOrderList));
    hourOrderListNew.forEach((item) => {
      item.strategyBenefitsChange = benefit;
      item.strategyPowerComputed = false;
      item.strategyPriceComputed = false;
      item.strategyBenefitsComputed = false;
    });
    dispatch({
      type: 'dayRollingTradeStragety/setHourOrderList',
      payload: hourOrderListNew,
    });

    setShowModal(false);
  };

  return (
    <Modal
      className={styles.benefitSettingModal}
      centered={true}
      title={
        <div className={styles.modalTitle}>
          <img src={configModal} />
          <span className={styles.text}>收益变动设置</span>
        </div>
      }
      visible={showModal}
      okText="确认"
      onCancel={() => {
        setShowModal(false);
      }}
      onOk={confirm}
    >
      <div className={styles.benefitTarget}>
        <span className={styles.label}>收益变动目标</span>
        <div className={styles.inputWrap}>
          <InputNumber
            className={styles.input}
            precision={2}
            value={benefit}
            onBlur={(e) => {
              let value = e.target.value;
              if (value === '' || !/^[-]?[\.\d]+$/.test(value)) return;
              value = NumberSub(value, 2);
              setBenefit(value);
            }}
          />
          <span>元</span>
        </div>
      </div>
    </Modal>
  );
}

export default connect(
  ({ dayRollingTradeStragety }) => ({
    hourOrderList: dayRollingTradeStragety.hourOrderList,
  }),
  null,
  null,
  { forwardRef: true },
)(React.forwardRef(BenefitSettingModal));
